<!DOCTYPE html>

<html>
<head>
<title>Flexify</title>

<script src="http://base2.googlecode.com/svn/version/1.0/src/base2.js"></script>
<script src="http://base2.googlecode.com/svn/version/1.0/src/base2-dom.js"></script>
<script src="layout/orientation.js"></script>
<link href="layout/orientation.css" rel="stylesheet">
<script src="layout/layout.js"></script>

<style>

button {
font-size: 1em;
font-family: inherit;
padding: 1px 20px;
margin: 0 3px;
}

span {
white-spkace: nowrap;
float: left;
}

body {
margin: 0;
padding: 5px;
background: #ece9d8;
font-size: 0.7em;
font-family: sans-serif;
}
</style>

<script>

// main script
new function () {
	eval(base2.namespace);

	// loader
	DOM.bind(document);
	document.addEventListener('DOMContentLoaded', function () {
		var layout = new FullLayoutManager(document, 'scroll');
		document.querySelectorAll('#container').forEach(function (element) {
			layout.setOrientation(element, 'horizontal');
			layout.setFlexibleProperty(element, 'margin-left');
			layout.setFlexibleProperty(element, 'margin-right');
		});
		layout.recalculate();
	}, false);
};

</script>

</head>

<body>
<div id="container">
<button><span>Flexify me captain!</span></button>
<button><span>Flexify me captain!</span></button>
<button><span>Flexify me captain!</span></button>
</div>
</body>
</html>